<template xmlns="http://www.w3.org/1999/html">
  <sea-net-frame ref="frameRef" url="/sys/role/page" :params="params">
    <!-- form-header -->
    <template #title>
      <h4>角色管理</h4>
      <span>权限管理的最小单位</span>
      <sea-tips>
        <p>权限、菜单分配到角色，再通过角色分配到具体用户</p>
        <p>权限自上向下分配，无特权账号。</p>
      </sea-tips>
    </template>

    <!-- form-input -->
    <template #input>
    </template>

    <!-- form-buttons -->
    <template #buttons>
      <el-button slot="buttons" @click="onAction('new', undefined,undefined)" title="新增角色">
        <i class="fa fa-fw fa-plus"></i>
      </el-button>
    </template>

    <!-- form-data -->
    <template #default="{list}">
      <el-table :data="list" border>
        <sea-col-link property="roleName" label="角色名称" width="180" :click="onAction"></sea-col-link>
        <el-table-column property="authorityCode" label="授权码" width="180"></el-table-column>
        <sea-col-switch property="isDisabled" label="是否可用" width="120" reverse></sea-col-switch>
        <el-table-column property="description" label="角色描述" show-overflow-tooltip></el-table-column>
      </el-table>

      <!-- drawer -->
      <el-dialog class="no-padding margin" v-model="create_dialog.open"
                 :width="create_dialog.width" :title="create_dialog.title">
        <create :on-succeed="onSucceed"></create>
      </el-dialog>

      <el-dialog class="no-padding margin" v-model="modify_dialog.open"
                 :width="modify_dialog.width" :title="modify_dialog.title">
        <modify :object="modify_dialog.item"></modify>
      </el-dialog>
    </template>
  </sea-net-frame>
</template>

<script setup lang="ts">
import create from "./create.vue";
import modify from "./modify.vue";
import {reactive} from "vue";

// 操作栏
const buttons = reactive([
    {type: 'btn', evt: 'edit', label: '编辑', title: '编辑当前行'}
]);

const params = {name: '1'}


// 创建界面参数
const create_dialog = reactive({
    // 是否展开
    open: false,
    // 标题栏
    title: '新建',
    // 宽度
    width: '50%',
    // 弹窗联动元素
    item: undefined
});

// 修改界面参数
const modify_dialog = reactive({
    // 是否展开
    open: false,
    // 标题栏
    title: '管理键值',
    // 宽度
    width: '70%',
    // 弹窗联动元素
    item: undefined
});

/**
 * 操作成功回调
 */
const onSucceed = () => {
    // this.$refs.tableObject.reload();
    // if (this.operation === 'new') {
    //     this.$refs.create_dialog.close();
    // } else if (this.operation === 'edit') {
    //     this.$refs.modify_dialog.close();
    // }
}

/**
 * 事件分发
 *
 * @param evt   事件名称
 * @param row   行级数据，可以直接修改
 * @param arg   发生变动的数据信息
 */
let operation = undefined;
const onAction = (evt, row, arg) => {
    operation = evt;
    if (evt === 'new') {
        create_dialog.open = true;
    } else if (evt === '$roleName') {
        modify_dialog.open = true;
        modify_dialog.item = row;
    }

}
</script>
